<template>
    <div class='tabs'>
        <div v-for="(tab,index) in tabJson" :key="index" class="tabGroup">
            <div  v-for="(item,index2) in tab.maps" :key="index2" class="tabBtn" :flag="index"   v-on:click="tabClick($event,index,index2)" v-html="item.name" >
               
            </div>
        </div>

        <el-dialog
            title="日期选择"
            :visible.sync="dialogVisible"
            style="left:0%;top:0%"
            width="40%">
            <div style='height:50px'>
                <!--el-date-picker 
                    v-model="dateselect"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                    </el-date-picker-->
                    <el-date-picker
                   
                        :editable="false"
                        v-model="dateselect"
                        value-format="yyyy-MM-dd"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
            </div>
            
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dateselects">确 定</el-button>
            </span>
            </el-dialog>
    </div>
</template>
<script>
import Vue  from 'vue'
export default {
    props:['tabJson','searchJson'],
    name: "tab-bar",
    components: {
        
    },
    data(){
        return{
            isShowSearch:false,
            showDate:false,
            dateselect:'',
            dialogVisible:false,
            curIndex:-1,
            curIndex2:-1
        }
    },
    mounted(){
        window.setTimeout(function(){
            let el=document.getElementsByClassName("tabGroup");
            for(let i=0;i<el.length;i++){
                let elc=el[i].getElementsByClassName("tabBtn");
                elc[0].classList.add("active")

            }
        },1000)
        //alert(this.tabJson[0].maps[0].opr);
        try{
            if(this.tabJson[0].maps[0].opr)
                this.tabJson[0].opr=this.tabJson[0].maps[0].opr;
        }catch(e){}
    },
    watch:{
        dateselect(val){
            this.dateselects()
        }
    },
    methods:{
       
        tabClick(event,index,index2){
            let flag=event.target.getAttribute("flag");
            let el=document.getElementsByClassName("tabBtn");
            for(let i=0;i<el.length;i++){
                let flag_=el[i].getAttribute("flag");
                if(flag==flag_){
                    el[i].classList.remove("active");
                    el[i].classList.add("noActive")
                }
            }
        
            event.target.classList.remove("noActive");
            event.target.classList.add("active")
           
            let tab=this.tabJson[index];
            let maps=tab.maps;
            let name=maps[index2].name;
            let val=maps[index2].val;
            let listname=maps[index2].listname;
            let field=maps[index2].field;
            let opr=maps[index2].opr;
            if(!opr){
                opr="";
            }
           
            if(name.indexOf("选择日期")==-1){
                this.tabJson[index].curVal=val;
                this.tabJson[index].opr=opr;
                for(let i=0;i<this.tabJson.length;i++){
                    this.tabJson[i].listname="";
                }

                this.tabJson[index].listname=listname;
                this.tabJson[index].isDateSelect="N";
                this.tabJson[index].tabField=field;
                this.$emit('tab-event',JSON.stringify(this.tabJson))
                console.log(this.tabJson[index])
            }else{
                this.dialogVisible=true;
                this.curIndex=index;
                this.curIndex2=index2;
            }
            console.log( this.tabJson[index])
            for(let h=0;h<this.searchJson.length;h++){
                let item=this.searchJson[h];
                console.log("tab.field========"+field)
                if(item.field==field){
                 //   this.$set(this.searchJson[h],"vals",val)
                    this.$set(this.searchJson[h],"val",val)
                }
            }
           
            console.log(this.searchJson,"searchJson============")
        },
        dateselects(){
            this.dialogVisible = false;
            for(let i=0;i<this.tabJson.length;i++){
                this.tabJson[i].listname="";
            }
            //alert(this.dateselect)
            this.tabJson[this.curIndex].curVal=this.dateselect;
            //this.tabJson[this.curIndex].isDateSelect="Y";
            this.tabJson[this.curIndex].listname=this.tabJson[this.curIndex].maps[this.curIndex2].listname;
            this.$emit('tab-event',JSON.stringify(this.tabJson))
        }
    }
}
</script>
<style  scoped>
    
    .showbar{
        text-align:center;
        height:32px;
        border-top:1px solid #ddd;
    }
    .showbar:hover{
        background:#ddd;
    }

    .tabGroup{
        margin-right:15px;
       
        border-right:0;
        border-bottom:0;
    }
    .tabs{
        /*margin-top:15px;*/
    }
    .tabs div{
        display:inline-block;
        box-sizing:content-box;
    }
    .tabs>div>div{
        height:20px;
    }   
    .tabBtn{
        cursor: pointer;
      
        font-size:12px;
       /** border-bottom:1px solid #ddd; */
        color:#778ca2;
        background:#f0f4fa;
        margin-left:6px;
        padding:6px 10px;
    }
    .active{
        background:#418aea;
        color:#FFF;
        border-bottom:0;
        padding:10px 10px;
        vertical-align: bottom;
    }
    .noActive{
        color:#778ca2;
        background:#f0f4fa;
        padding:6px 10px;
        
    }
    .tabBtn i{
        margin-right:5px;
        color:#505254;
    }
</style>